<template>
	<view class="shequPerson">
		<view class="tabs flex-center">
			<view class="flex-center" :class="{active:tabIndex == 0}" @click="changeTab(0)">邀请</view>
			<view class="flex-center" :class="{active:tabIndex == 1}" @click="changeTab(1)">返佣明细</view>
		</view>
		<block v-if="tabIndex == 0">
			<view class="top">
				<view class="p">为经纪人提供高额的合约返佣收益</view>
				<view class="middle flex-between">
					<view class="h4">普通会员</view>
					<view class="text">邀请码:975787</view>
				</view>
				<view class="btn flex-center">立即邀请</view>
			</view>
			<view class="next">
				<view class="h4">我的邀请</view>
				<view class="flex-between">
					<view class="item">
						<view class="h2">0.000</view>
						<text>昨日佣金</text>
					</view>
					<view class="item">
						<view class="h2">0.000</view>
						<text>累计佣金</text>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="tabs flex">
					<view class="flex-center" :class="{active:menuIndex == 0}" @click="changeMenu(0)">直推</view>
					<view class="flex-center" :class="{active:menuIndex == 1}" @click="changeMenu(1)">团队</view>
				</view>
				
				<empty title="暂无邀请记录" desc="成功邀请用户后可以在这里查看"></empty>
			</view>
		</block>
		<block v-if="tabIndex == 1">
			<empty title="暂无佣金记录" desc="当有返佣后可以在这里查看"></empty>
		</block>
	</view>
</template>

<script>
	import Empty from '@/components/empty.vue'
	export default {
		components:{
			Empty
		},
		data() {
			return {
				tabIndex:0,
				menuIndex:0
			};
		},
		methods:{
			changeTab(i){
				this.tabIndex = i;
			},
			changeMenu(i){
				this.menuIndex = i;
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:"/pages/self/level"
			})
			
		}
	}
</script>

<style lang="less">
	@color:#d4237a;
	.shequPerson{
		.tabs {
			background: white;
			// position: fixed;
			top: 0;
			width: 100vw;
			z-index: 10;
			view {
				width: 25%;
				font-size: 30rpx;
				font-weight: bold;
				color: #666;
				line-height: 2;
				padding-bottom: 10rpx;
		
				&.active {
					color: #000;
					position: relative;
		
					&::after {
						content: "";
						display: block;
						width: 30rpx;
						height: 4rpx;
						position: absolute;
						bottom: 5rpx;
						left: calc(50% - 15rpx);
						background: @color ;
					}
				}
			}
		
		}
		.top{
			background: @color;
			border-radius: 15rpx;
			color:white;
			padding: 24rpx;
			box-sizing: border-box;
			margin: 24rpx 30rpx;
			.p{
				font-size: 26rpx;
			}
			.middle{
				margin: 40rpx 0;
				&>view{
					width: 50%;
					font-size: 40rpx;
				}
				.text{
					font-size: 32rpx;
				}
			}
			.btn{
				width: 300rpx;
				height: 60rpx;
				background: #fff;
				color:@color;
				border-radius: 30rpx;
				margin: auto;
			}
		}
		.next{
			padding: 24rpx 30rpx;
			background: white;
			margin-bottom: 30rpx;
			.h4{
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.h2{
				font-size: 40rpx;
				font-weight: bold;
			}
			text{
				font-size: 26rpx;
				color:#666;
			}
			.item{
				width: 48%;
			}
		}
	}
</style>
